
document.write(`
    <style>
    .pager{
        display: inline-block;
        text-align: center;
        min-width: 20px;
        padding: 5px;
        margin: 5px;
        border-radius: 3px;
        cursor: pointer;
    }
    td,th{
        display: inline-block;
        width: 200px;
        text-align: center;
    }
</style>

`);

Vue.component("el-pagination",{
    props:["background","page-size","current-page","layout","total","page-sizes"],
    template:`
        <div>
            <select v-if="pageSizes != undefined"
            v-model=" selectSize " @change="pageSize = selectSize">
            <option v-for=" size in pageSizes" :value="size" >每页{{size}}行</option>

            </select>
            <template v-for=" l in layouts">
                <span v-if=" l=='first' " class="pager" style="background-color: #eee">第一页</span>

                <span v-if=" l=='prev' " :style="getStyle(0)"  @click="curPage+=(curPage==1?0:-1);$emit('page-change',curPage)"
                class="pager">上一页</span>

                <span v-if=" l=='pager' " class="pager" v-for=" p in pages"
                :style="getStyle(p)" @click="curPage=p;$emit('page-change',curPage)""> {{p}}</span>

                <span v-if=" l=='next' " :style="getStyle(0)"  @click="curPage += (curPage==pages?0:1);$emit('page-change',curPage)""
                class="pager" style="background-color: #eee">下一页</span>


                <span v-if=" l=='last' " class="pager" style="background-color: #eee">最后一页</span>
            </template>
        </div>
        `,
    data(){
        return{
            curPage : 1,
            layouts:[],
            selectSize:0
        }
    },
    created(){
        this.curPage=parseInt(this.currentPage);
        //字符串转数组，用正则表达式分割
        this.layouts=this.layout.split(/\W+/);
        this.selectSize=this.pageSize;
    },
    computed:{
        pages(){
            let all = this.total / this.pageSize;
            all=Math.floor(all);//取整
            if (this.total % this.pageSize!=0){
                all++;
            }
            return all;
        }
    },

    methods:{
        getStyle(p){
            let ret ={backgroundColor : null };
            if (this.background!=undefined){
                ret.backgroundColor ='#eee';
            }
            if ( p == this.curPage ){
                ret.backgroundColor='#aaa';
            }
            return ret;
        }
    }
});

